<style scoped lang='less'>
    .five-admin {
        .selected-search-components{
            .select-click{
                width: 25% !important;
                margin-bottom: 20px;
            }
        }
    }
</style>
<template>
    <div class="five-admin">
        <Tabs type="card">
            <!--<Tab-pane label="图表显示">-->
                <!--<div id="wanhao" ></div>-->
            <!--</Tab-pane>-->
            <Tab-pane label="数据显示">
                <Table :context="self" :data="tableData" :columns="tableColumns" stripe border></Table>
            </Tab-pane>
        </Tabs>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                tableColumns: [
                    {
                        title: '油料类型',
                        key: 'OilTypeName',
                        align: 'center',
                    },
                    {
                        title: '油料存储量的值',
                        key: 'OilValue',
                        align: 'center',
                    },
                ]
            }
        },
        mounted: function () {
            // this.drawChartWh();
            this.mockTableData();
        },
        components: {},
        methods: {
            mockTableData() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.OilDataList, params, function (res) {
                    that.$Loading.finish();
                    that.tableData = res.Msg;

                });
            },

            //完好率
            drawChartWh() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("wanhao"));
                let that = this;

                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                    },
                    series: [
                        {
                            name:'访问来源',
                            type:'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:335, name:'直接访问'},
                                {value:310, name:'邮件营销'},
                                {value:234, name:'联盟广告'},
                                {value:135, name:'视频广告'},
                                {value:1548, name:'搜索引擎'}
                            ]
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, "light");
            },
        }
    }
</script>
